<template>
  <div>
    <div class="outmain ba_f">
      <!--            <div class="shuju_title mar_b20">-->
      <!--                <div class="shuju_title_text">-->
      <!--                    <span>小程序设置</span>-->
      <!--                </div>-->
      <!--            </div>-->
      <el-form ref="form" :model="form" label-width="180px">
        <div class="shuju_title mar_b20">
          <div class="shuju_title_text">
            <span>用户渠道授权</span>
          </div>
        </div>
        <el-form-item label="用户端：">
          <el-checkbox-group v-model="form.channel_arr">
            <el-checkbox v-for="item in operation" :label="item.name" :key="item.name" size="medium">{{item.use_name}}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <div class="shuju_title mar_b20">
          <div class="shuju_title_text">
            <span>门店模式</span>
          </div>
        </div>
        <el-form-item label="选择模式：">
          <el-radio-group v-model="form.shopModel" @change="radioChange">
            <el-radio label="1">单门店</el-radio>
            <el-radio label="2">多门店</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="可创建门店数量：" v-show="form.shopModel=='2'">
          <el-input v-model="form.shopNum" placeholder="请输入可创建门店数量" v-show="!checked"></el-input>
          <el-checkbox v-model="checked" class="checkBox" @change="checkChange">无限</el-checkbox>
          <!-- `checked` 为 true 或 false -->
        </el-form-item>
        <div class="shuju_title mar_b20">
          <div class="shuju_title_text">
            <span>应用插件授权</span>
          </div>
        </div>
        <el-form-item label="应用插件：">
          <div class="flex">
            <div>
              <el-checkbox-group v-model="form.use_str">
                <el-checkbox v-for="item in operation3" :label="item.name" :key="item.name" size="medium">{{item.use_name}}</el-checkbox>
              </el-checkbox-group>
            </div>
            <div class="mar_l20">
              <el-checkbox-group v-model="form.instore">
                <el-checkbox true-label="1" false-label="2">店内功能</el-checkbox>
              </el-checkbox-group>
            </div>
            <div class="mar_l20">
              <el-checkbox-group v-model="form.takeout">
                <el-checkbox true-label="1" false-label="2">外卖功能</el-checkbox>
              </el-checkbox-group>
            </div>
          </div>
        </el-form-item>
        <div class="shuju_title mar_b20">
          <div class="shuju_title_text">
            <span>增值插件授权</span>
          </div>
        </div>
        <el-form-item label="增值插件：">
          <el-checkbox-group v-model="form.plug_str">
            <el-checkbox v-for="item in operation2" :label="item.name" :key="item.name" size="medium">{{item.use_name}}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="商户端：">
          <el-checkbox-group v-model="form.service_str">
            <el-checkbox v-for="item in operation4" :label="item.name" :key="item.name" size="medium" disabled>{{item.use_name}}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <div class="shuju_title mar_b20">
          <div class="shuju_title_text">
            <span>配送设置</span>
          </div>
        </div>
        <el-form-item label="配送支持：">
          <el-checkbox-group v-model="form.deliveryMode">
            <el-checkbox v-for="item in distList" :label="item.value" :key="item.value" size="medium">{{ item.name}}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <div class="shuju_title mar_b20">
          <div class="shuju_title_text">
            <span>收银台设置</span>
          </div>
        </div>
        <el-form-item label="收银台名称">
          <el-input type="text" v-model="form.cashierName" placeholder="请输入收银台名称"></el-input>
        </el-form-item>
         <el-form-item label="收银台LOGO">
          <custom-upload @click="openImg('cashierIcon')" @close="form.cashierIcon = ''" :img-src="form.cashierIcon"></custom-upload>
        </el-form-item>
        <el-form-item label="收银台登录背景图">
          <custom-upload @click="openImg('cashierBg')" @close="form.cashierBg = ''" :img-src="form.cashierBg"></custom-upload>
        </el-form-item>
        <div class="shuju_title mar_b20">
          <div class="shuju_title_text">
            <span>其他权限设置</span>
          </div>
        </div>
        <el-form-item label="网站导航左侧LOGO">
          <div class="uploadSource bor_de rel flex" v-if="form.icon">
            <label class="statusLabel curs" @mouseenter="enter(1)" @mouseleave="leave(1)">
              <i class="el-icon-check" ref="imgicon1"></i>
              <i class="el-icon-close" @click="deleteMultiImage(form.icon,1)"></i>
            </label>
            <img :src="form.icon" @click="test(1)" class="wid" />
          </div>
          <div class="uploadSource flex-center curs" v-else @click="test(1)">
            <i class="el-icon-plus fon_40 color_d9"></i>
          </div>
          <div class="yb_margin">建议尺寸：720*180</div>
        </el-form-item>
        <el-form-item label="客服QQ">
          <el-input v-model="form.qq" placeholder="请输入客服QQ"></el-input>
        </el-form-item>
        <el-form-item label="版权文字">
          <el-input v-model="form.content" placeholder="请输入版权文字" type="textarea"></el-input>
          <div class="yb_margin lh16">此处版权文字显示页面底部</div>
        </el-form-item>
        <el-form-item label="技术支持">
          <el-input v-model="form.support" placeholder="请输入技术支持" maxlength="20"></el-input>
          <div class="yb_margin lh16">此处技术支持显示前台小程序页面底部，20个字以内</div>
        </el-form-item>
         <el-form-item label="云贝配送名称">
          <el-input v-model="form.yunbeiName" placeholder="云贝配送名称"></el-input>
          <div class="yb_margin lh16">自定义云贝配送名称</div>
        </el-form-item>
        <el-form-item label="码科配送名称">
          <el-input v-model="form.makeName" placeholder="码科配送名称"></el-input>
          <div class="yb_margin lh16">自定义码科配送名称</div>
        </el-form-item>
      </el-form>
    </div>
    <div class="mar_t20 ba_f pad_20 t_c">
      <el-button type="primary" @click="submitForm">保存</el-button>
    </div>
    <attachment-img ref="img1" type="img" @attachment="imgadd1"></attachment-img>
    <attachment-img ref="img2" type="img" @attachment="imgadd2"></attachment-img>
    <attachment-img ref="img3" type="img" @attachment="imgadd3"></attachment-img>
    <attachment-img ref="attachmentImg" @attachment="callBack"></attachment-img>
  </div>
</template>
<script>
import attachmentImg from '@/plugins/attachment-img';
import CustomUpload from '@/components/custom-upload.vue';
import { getConfig, postConfig } from '@/api/setup';
export default {
  created() {
    this.bus.$emit('loading', true);
    if (this.$route.query.uniacid) {
      this.uniacid = this.$route.query.uniacid;
      this.init();
    }
  },
  components: { attachmentImg,CustomUpload },
  data() {
    return {
      form: {
        icon: '',
        name: '',
        channel_arr: [],
        plug_str: [],
        use_str: [],
        instore: '1',
        takeout: '1',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: '',
        qq: '',
        makeName: '',
        shopModel: '1',
        shopNum: '50',
        content: '',
        service_str: '',
        makeIcon: '',
        yunbeiIcon: '',
        yunbeiName: '',
        support: '',
        deliveryMode: ['1', '2', '3', '4', '5', '6', '7', '8', '9'],
        cashierName: '',
        cashierIcon: '',
        cashierBg: ''
      },
      checked: false,
      uniacid: '',
      operation: [],
      operation2: [],
      operation3: [],
      operation4: [],
      distList: [
        {
          value: '9',
          name: '云贝配送'
        },
        {
          value: '2',
          name: '达达配送'
        },
        {
          value: '3',
          name: '点我达'
        },

        {
          value: '5',
          name: '顺丰同城'
        },
        {
          value: '6',
          name: '蜂鸟即配'
        },
        {
          value: '7',
          name: '闪送'
        },
        {
          value: '8',
          name: 'uu跑腿'
        },
        {
          value: '4',
          name: '码科配送'
        },
        {
          value: '1',
          name: '商家配送'
        }
      ],
      keyName: ''
    };
  },
  methods: {
    openImg(key) {
      this.keyName = key;
      this.$refs.attachmentImg.dialogVisible = true;
    },
    callBack(msg) {
      this.form[this.keyName] = msg.str;
    },
    async init() {
      const { data } = await getConfig({ ident: 'sysTopImage', uniacid: this.uniacid });
      if (data.shopNum == 0 && data.shopModel == '2') {
        this.checked = true;
      }

      this.form2 = this.form;
      this.form = Object.assign(this.form2, data);
      if (this.form.shopModel == '1') {
        this.form.shopNum = '50';
      }
      this.operation = data.channel_list ? data.channel_list : [];
      this.operation2 = data.plug_list ? data.plug_list : [];
      this.operation3 = data.use_list ? data.use_list : [];
      this.operation4 = data.service_list ? data.service_list : [];
      this.bus.$emit('loading', false);
    },
    checkChange(val) {
      this.checked = val;
    },
    radioChange(val) {
      if (val == '1') {
        this.checked = false;
      }
    },
    hrefadd() {
      this.$router.push({ path: '/addgood1' });
    },
    enter(i = 0) {
      this.$refs['imgicon' + i].style.display = 'none';
    },
    leave(i = 0) {
      this.$refs['imgicon' + i].style.display = 'inline-block';
    },
    test(i = 0) {
      console.log(this.$refs, i);
      this.$refs['img' + i].dialogVisible = true;
    },
    imgadd1(url) {
      this.form.icon = url.str;
    },
    imgadd2(url) {
      this.form.makeIcon = url.str;
    },
    imgadd3(url) {
      this.form.yunbeiIcon = url.str;
    },
    deleteMultiImage(item, index, type) {
      //typem没传是单图multigraph多图；index上传图片组件排序
      Array.prototype.remove = function (val) {
        var index = this.indexOf(val);
        if (index > -1) {
          this.splice(index, 1);
        }
      };
      if (type == 'multigraph') {
        switch (index) {
          case 2:
            // this.form2.environment.remove(item);
            break;
        }
      } else {
        switch (index) {
          case 1:
            this.form.icon = '';
            break;
          case 2:
            this.form.makeIcon = '';
            break;
          case 3:
            this.form.yunbeiIcon = '';
            break;
        }
      }
    },
    submitForm() {
      this.$refs['form'].validate(async (valid) => {
        if (valid) {
          this.form.ident = 'sysTopImage';
          this.form.identName = '网站头部LOGO';
          this.form.uniacid = this.uniacid;
          const selectOperation = this.operation.map((item) => item.name);
          const selectOperation2 = this.operation2.map((item) => item.name);
          const selectOperation3 = this.operation3.map((item) => item.name);
          this.form.channel_arr = this.getArrEqual(selectOperation, this.form.channel_arr);
          this.form.plug_str = this.getArrEqual(selectOperation2, this.form.plug_str);
          this.form.use_str = this.getArrEqual(selectOperation3, this.form.use_str);
          if (this.checked) {
            this.form.shopNum = 0;
          }
          const { msg } = await postConfig(this.form);
          this.$baseMessage(msg, 'success');
          this.checked = false;
          this.form.shopNum = '50';

          this.init();
          // this.$router.go(0);
        } else {
          return false;
        }
      });
    },
    getArrEqual(arr1, arr2) {
      let newArr = [];
      for (let i = 0; i < arr2.length; i++) {
        for (let j = 0; j < arr1.length; j++) {
          if (arr1[j] === arr2[i]) {
            newArr.push(arr1[j]);
          }
        }
      }
      return newArr;
    }
  }
};
</script>
<style>
.checkBox .el-checkbox__input {
  margin-left: 15px;
}
</style>
